<template>
  <view class="uni-content content" id="content">
    <view v-if="!scenesListVisible" class="buttons-box">
      <button class="button" @click="showSiderBar()">
        <text class="button-text">{{ curScene.displayName }}</text>
      </button>
    </view>
    <SceneViewer
      :scene-name="curScene.name"
      @deviceSelected="onDeviceSelected"
      @deviceUnselected="onDeviceUnselected"
    ></SceneViewer>

    <ul v-if="scenesListVisible" class="scenes-list">
      <li
        class="scene-item"
        v-for="item in scenes"
        :class="{ disabled: item.disabled, active: item.active }"
        :key="item.name"
        @click="showScene(item)"
      >
        {{ item.displayName }}
      </li>
    </ul>
   <div v-if="deviceInfoVisible" class="device-info">
      <div class="device-info-no">
        {{ device.no }}
      </div>
	  <div>（（（（（（</div>
      <div class="device-info-description">
        {{ device.description }}
      </div>
    </div>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getDefaultScene, scenes } from "@/components/scenes";
import type { EventDeviceInfo, SceneInfo } from "@/components/scenes";
const curScene = ref<SceneInfo>(getDefaultScene());
const device = ref({ no: "", description: "" });
const scenesListVisible = ref(false);
const deviceInfoVisible = ref(false);

function onDeviceSelected(e: EventDeviceInfo): void {
	console.log('dev',e)
  device.value = e.deviceInfo;
  deviceInfoVisible.value = true;
  scenesListVisible.value = false;
}

function onDeviceUnselected(): void {
  device.value = { no: "", description: "" };
  deviceInfoVisible.value = false;
}

function showScene(scene: SceneInfo) {
  if (scene.disabled) {
    return;
  }
  if (!scene.active) {
    for (const item of scenes) {
      item.active = false;
    }
    scene.active = true;
    curScene.value = scene;
  }
  scenesListVisible.value = false;
}
function showSiderBar() {
  scenesListVisible.value = true;
  deviceInfoVisible.value = false;
}
onMounted(() => {
	console.log('scenes--',scenes)
});
showScene(getDefaultScene());
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  --primary-color: #11e48a;
  --disabled-color: #d3d3d3;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.scenes-list {
  list-style: none;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  padding: 1rem;
  width: 200px;
  line-height: 2rem;
  background: #33333333;
  height: 100%;
  color: var(--primary-color);
  font-size: 32px;
}

.buttons-box {
  display: block;
  position: absolute;
  z-index: 1;
  right: 1rem;
  bottom: 1rem;
  width: 100px;
}

.scene-item {
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: center;
}

.scene-item.disabled {
  color: var(--disabled-color);
}

.scene-item.active {
  border-color: var(--primary-color);
}
.device-info {
  position: absolute;
  z-index: 2;
  top: 44px;
  right: 0;
  width: 400px;
  height: calc(100% - 200px);
  padding: 1rem;
  background: #3333;
  color: white;
  font-size: 2rem;
  border-radius: 4px;
}
</style>
